<template>
  <div>
    <span>全选:</span>
    <input type="checkbox" v-model="isAll" />
    <button @click="fanFN">反选</button>
    <ul>
      <li v-for="(obj,index) in arr" :key="index">
        <input type="checkbox" v-model="obj.checked" />
        <span>{{obj.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        arr: [{
            name: "猪八戒",
            checked: false,
          },
          {
            name: "孙悟空",
            checked: false,
          },
          {
            name: "唐僧",
            checked: false,
          },
          {
            name: "白龙马",
            checked: false,
          },
        ],
      };
    },
    computed: {
      isAll: {
        set(val) {
          this.arr.forEach(obj => obj.checked = val);
        },
        get() {
          // return this.arr.every((obj) => obj["checked"] == true);
          return this.arr.every(val => val.checked == true)
        }
      }
    },
    methods: {
      fanFN() {
        this.arr.forEach(val => val.checked = !val.checked)
      }
    }
  };
</script>

<style>
</style>